<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简书-关注</title>
	<style>
		*{
			margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
		text-decoration: none;
		}
		#container{
             width: 100%;
             margin:0 auto;
		}
		#header{
             height:60px;
             width: 100%;
             background: #fff;
             top:0px;  
             display: flex;  
             border-bottom: 1px solid #ccc;  
             position: fixed;     
             z-index: 999; 
             background-color: #fff; 
		}
		#middle{
             display: flex;
             width: 1000px;
             padding-left: 150px;
             padding-right: 150px;
		}
		#left{
			 margin-top: 60px;
             width: 30%;
             min-height: 1500px;
             background:#fff;             
		}
		#left>div{
			width: 250px;
			height: 60px;
			display: flex;
			margin-left: 5px;
			border-bottom: 1px solid #ccc; 
		}


		#quanbu{
			display: flex;
			margin-top: 25px;
            width: 120px;
            padding-left: 20px
		}
		#quanbu>span{
           font-size: 1em;
           width: 70px;
          color: #444;
		}
		#quanbu>img{
            width: 23px;
            height: 23px;
		}
		#tianjia{
			display: flex;
			margin-left: 25px;
			margin-top: 25px;
            width: 120px;
            padding-left: 20px
		}
		#tianjia>span{
           font-size: 1em;
           color: #444;
		}
		#tianjia>img{
            width: 23px;
            height: 23px;
		}
		#right{
			 margin-top: 60px;
             width: 70%;
             min-height: 800px;
             background:#fff;       
		}
		#one{
         width: 120px;
         height: 60px;
         margin-left: 1px;

		}
		#one_{			
		 width: 100px;
         height: 60px;	
         padding-left: 5px;
         cursor:pointer;		            
		}

		#aaa{
			 height: 60px;	
             display: flex;
             margin-left: 55px;
             padding-left: 5px;
             padding-top: 10px;
             text-align: center;
		}
		.bbb{
			height: 60px;	
			width: 80px;
			height: 40px;
			cursor:pointer;
			text-align: center;
		}
		.bbb>a{
			line-height: 40px;
			color: black;
		}

		.bbb_{
    		margin-left: 32px;
			height: 40px;	
			width:190px;
			height: 40px;
            display: flex;           
            background-color: #eeeeee;
            border:1px solid #eee;
            border-radius: 30px;
            white-space: nowrap;
		}
        .bbb_>a{
           
           width:25px;
           height: 30px;
        }
		#search_txt{
           width:115px;
           height: 40px;
           border:none;   
           padding-left:20px; 
           overflow: hidden; 
           background-color: #eeeeee; 
           outline: none;   
           margin-left: 12px; 
		}
		#ssuo{
			padding-left: 3px;
		   margin-left: 3px;
		   padding-top: 6px;
           overflow: hidden;
           width:25px;
           height: 30px;
           cursor:pointer;
           outline: none;
		}
		#two>a>img{
		   width: 40px;
           height: 40px;
           padding: 10px;
           border-radius: 50px;
           position: absolute;
		   right:10%;
		   overflow: hidden;
		}
       #three{
       	   width: 340px;
           height: 40px;
           padding-top: 3px;
           margin-left: 6px;
       }
       #commands{
       	width:100%;
       	height: 60px;
       	line-height: 60px;
        padding-left: 10px;
       }
       #commands>li{
          margin: 10px; 
       }
       #commands>li>a{
       	display: flex;
        cursor:pointer;
            	
       }
      
       
       #commands>li:hover{
       	background-color: #eee;
       }
       .a{
       	padding-top: 10px;
       	padding-left: 10px;
       	width: 50px;
        height: 50px;
       }
       .b{
       	padding-top: 10px;
       	width:120px;
        height: 40px;
        line-height: 40px;
        color:black;
       }
       .a>img{
        width: 40px;
        height: 40px;
       }
       
       .touxiang{
       	width: 20px;
       	height: 20px;
       	 border-radius: 50px;
       }
       .moban{

       	 border-bottom: 1px solid #ccc; 
       	 display: flex;
       	 margin-left: 10px;
       }
       .moban_{
       	 padding-top: 25px;
       }
      
       .moban>a{
       	margin-top: 70px;
       	margin-left: 60px;
       }
       .moban_>a{
       	margin-top: 20px;
       }
       .moban>a>img{
       	width: 125px;
       	height: 100px;
       }
       .yi{
       	display: flex;
       	margin-top:50px;

       }
       .yi>a{
       	width: 30px;
       	margin-left: 8px;
       }
       .yi>div{
       	display: flex;
       }
       .ncheng{
       	font-size: 0.8em;
       	color: #111;
       	width: 150px;
       }
       .xihuan{
       	font-size: 0.8em;
       	color:#555;
       }
       .title{
       	width: 500px;
       	margin-top: 10px;
       	margin-bottom: 10px;
       }
       .title>a{
       	
       	margin-left:5px; 
       	font-size: 1.2em;
       	font-weight: 600;
       	color:black;
       }
      .part{
        font-size: 1em;
        color:#777;
       }
       .meta{
       	display: flex;
       	height: 18px;
       	color:#666;
        margin-top: 10px;
       	margin-bottom: 25px;
       }
       .meta>div{
       	width: 100px;
        height: 18px;
       }
       .meta>div>a{
       	padding-top: 12px;
       	font-size: 0.8em;
       	color:#666;
       	width: 40px;
       	height: 18px;
       }
       .pl{
       	display: flex;
       	width: 50px;
       }
       .pl>img{
       	width: 25px;
       	height: 25px;
       }
       .zan{
       	width: 50px;
       	display: flex;
       }
       .zan>img{
       	width: 25px;
       	height: 25px;
       }
       .pl>span{
       	padding-top: 3px;
       	font-size: 0.8em;
       	color:#666; 
       	width: 30px;
       	height: 18px;	
       }
       .zan>span{
       	padding-top: 3px;
       	width: 30px;
       	font-size: 0.8em;
       	height: 18px;
       }
       #ul_select{
       	/*
       	static:相对定位并且位置参数无效
       	relative:相对定位
       	absolute:绝对于父元素
       	fixed:绝对于浏览器
       	*/
       	position: absolute;
       top:108px;
       left:200px;
       	border:1px solid #ccc;
        width: 110px;
        margin-top: 5px;
        background-color: #fff;
        text-align: center;
        padding-bottom: 20px;
       }
       #ul_select>li{
       	margin-top: 20px;
       }
       #ul_select>li>a>span{
       	margin-left: 10px
       	
       	font-size: 1em;
       	color: #111;
       }
	</style>
</head>
<body>
	<div id="container" > 
	<div id="header">
       <div id="one">
       	<a href="https://www.jianshu.com/"><img id="one_" src="Pictures/7.png" alt=""></a>
       </div>
       <ul id="aaa">       
       	<li class="bbb"><a href="">发现</a></li>
       	<li class="bbb"><a href="" style="color:#ea7c6e;">关注</a></li>
       	<li class="bbb"><a href="">消息</a></li>
       	<li class="bbb_">
       	<input type="text" id="search_txt" placeholder="搜索">
       	<a href=""><img id="ssuo" src="Pictures/1.png" alt=""></a>
       	</li>
       </ul>
       <div id="two">
       	<a href=""><img src="https://cdn2.jianshu.io/assets/default_avatar/4-3397163ecdb3855a0a4139c34a695885.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120" alt=""></a>
       </div>
       <div id="three">
       	<a href=""><img src="Pictures/2.png" alt=""></a>
       </div>
	</div>
	<div id="middle">
		<div id="left">		
		    <div >
		    	<div id="quanbu" onclick="downlist('ul_select')" onmouseleave="hiding('ul_select')" >
		    		<span>全部关注</span>
		    		<img src="Pictures/5.png" alt="">
		    		<ul id="ul_select" >
			           <li>
			           <a href="">
			           <i></i>
			           <span>全部关注</span>
			           </a>

			           <li>
			           <a href="">
			           <i></i>
			           <span>只看作者</span>
			           </a>
			           
			           <li>
			           <a href="">
			           <i></i>
			           <span>只看专题</span>
			           </a>
			
			           <li>
			           <a href="">
			           <i></i>
			           <span>只看文集</span>
			           </a>
			
			           <li>
			           <a href="">
			           <i></i>
			           <span>只看推送更新</span>
			           </a>
		</ul>

		    	</div>
		    	<div id="tianjia">
		    		<img src="Pictures/6.png" alt="">
		    		<span>添加关注</span>
		    	</div>
		    </div>
			<ul id="commands">	
                  <li>
                  <a href="javascript:setRight('jianYouQuan')">
                  <div class="a">
                  	<img src="https://cdn2.jianshu.io/assets/web/jianyouquan-2fb0cd72e35147c79d6507c3a3a2591b.png" alt="">
                  </div>
                  <div class="b">知友圈</div>
                  </a></li>

                  <li>
                  <a href="javascript:setRight('guoxue')">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/105/2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">国学与传统文化</div>                 
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/4/sy_20091020135145113016.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">读书</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/95/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">故事</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/83/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">摄影</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/13/%E5%95%8A.png?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">旅行 在路上</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">简书电影</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/277031/645317897236768460.png?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">娱乐圈</div> 
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/30/IMG_2226.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">美食</div>
                  </a></li>

                  <li><a href="javascript:setRight('shengH')">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/25920/enhanced-buzz-wide-16461-1372163238-8.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div > 
                  <div class="b">生活家</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/users/upload_avatars/1789560/15a1334d66d9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b">电影聚焦</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/collections/images/14/6249340_194140034135_2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b"> @IT 互联网</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/users/upload_avatars/7634355/97b41764-859d-438c-94b5-ecc3a2cd9a3c.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b"> 诗呆</div>
                  </a></li>

                  <li><a href="">
                  <div class="a">
                  	<img src="https://upload.jianshu.io/users/upload_avatars/181263/da06afe5-d5a6-4a9d-a24a-1f6a583cf8a1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120/format/webp" alt="">
                  </div>
                  <div class="b"> 桃叶青青</div>
                  </a></li>
              </ul>
		</div>
		
		<div id="right">
			
	</div>
	
</div>
<script>
	function setRight(id){
	var source=document.getElementById(id);
    var target=document.getElementById('right');
    target.innerHTML=source.innerHTML;

}

window.onload=function(){
	var ul= document.getElementById("ul_select");
    ul.style.display="none";
    setRight("jianYouQuan")
}

  function downlist(id){
  	var ul= document.getElementById(id);
    ul.style.display="block"; //显示下拉列表
  }
function hiding(id){
	var ul= document.getElementById(id);
    ul.style.display="none";
}
</script>
<script type="text/template" id="jianYouQuan">
  	<ul> 		
  		<li class="moban" >
  			<div>
  				<div class="yi">
  				<a href="">
  					<img class="touxiang" src="https://upload.jianshu.io/users/upload_avatars/11399974/80700d10-068f-4413-81f4-61b717381b83.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="">
  				</a>
  				<div>
  					<a  class="ncheng" href="" >飞飞的碎碎念</a>
  					<span class="xihuan">喜欢了文章. 35分钟前</span>
  				</div>
  				</div>
  				<div class="title">
  					<a href="">期末考试在即，爱的黑芝麻“熊猫“馒头来啦！</a>
  				</div>
  				<p class="part">女儿在昨天写母爱的作文当中写到：妈妈严厉起来的时候，比母老虎还凶。哈哈。臭坏蛋先生一直不管孩子们，俺是又当爹又当妈，自然是要恩威并施，...</p>
  				<div class="meta">
  					<div>
  						<a href="">新月娟娟从容</a>
  					</div>
  					<a  class="pl" href=""> 						
  					<img  src="Pictures/4.png" alt="">
  					<span>25</span>
  					</a>
  					<div class="zan">
  					<img src="Pictures/3.png" alt="">
  					<span>43</span>
  					</div>
  				</div>
  			</div>
  			<a href=""><img src="https://upload-images.jianshu.io/upload_images/13671249-928e48535e6d1e0f.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240/format/webp" alt=""></a>
  		</li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>


</script>
<script type="text/template" id="guoxue">
<ul> 		
  		<li class="moban moban_" style="margin-top: 10px;">
  			<div>
  				
  				<div class="title">
  					<a href="">期末考试在即，爱的黑芝麻“熊猫“馒头来啦！</a>
  				</div>
  				<p class="part">女儿在昨天写母爱的作文当中写到：妈妈严厉起来的时候，比母老虎还凶。哈哈。臭坏蛋先生一直不管孩子们，俺是又当爹又当妈，自然是要恩威并施，...</p>
  				<div class="meta">
  					<div>
  						<a href="">新月娟娟从容</a>
  					</div>
  					<a  class="pl" href=""> 						
  					<img  src="Pictures/4.png" alt="">
  					<span>25</span>
  					</a>
  					<div class="zan">
  					<img src="Pictures/3.png" alt="">
  					<span>43</span>
  					</div>
  				</div>
  			</div>
  			<a href=""><img src="https://upload-images.jianshu.io/upload_images/7713084-722bdaf3f73ff90b.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240/format/webp" alt=""></a>
  		</li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  		<li></li>
  	</ul>
</script>
</body>
</html>